<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 基本表单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">


    <div class="text-center">
        <a data-toggle="modal" class="btn btn-primary" href="#modal-form">添加</a>
    </div>
    <div id="modal-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6 b-r">
                            <h3 class="m-t-none m-b">添加学生</h3>
                            <form role="form">
                                <div class="form-group">
                                    <label>学号：</label>
                                    <input type="text" placeholder="请输入学号" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>姓名：</label>
                                    <input type="text" placeholder="请输入姓名" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>年龄：</label>
                                    <input type="email" placeholder="请输入年龄" class="form-control">
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">生日：</label>
                                    <div class="col-sm-10">
                                        <input id="hello" class="laydate-icon form-control layer-date">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>学院：</label>
                                    <input type="email" placeholder="请输入学院" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>班级：</label>
                                    <input type="email" placeholder="请输入班级" class="form-control">
                                </div>
                                <button style="margin-right: 82px;" class="btn btn-sm btn-primary pull-right m-t-n-xs" ><strong style="margin-right: 0px;">取消</strong>
                                </button>
                                <div>
                                    <button style="margin-right: 178px;"  class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>添加</strong>
                                    </button>


                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
    </script>



    <!-- layerDate plugin javascript -->
    <script src="js/plugins/layer/laydate/laydate.js"></script>
    <script>
        //外部js调用
        laydate({
            elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>





</body>

</html>
